<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>导航栏设置页面</title>
  <script src="../../static/js/jquery-1.11.0.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      /*background-color: gray;*/
    }

    #d1 {
      width: 100%;
      height: 100px;
      /*border: 1px solid red;*/
      line-height: 100px;
    }

    #d1 input[type='text'] {
      width: 300px;
      height: 38px;
      margin-left: 5%;
      border-radius: 5px;

    }

    #d1 input[type='button'] {
      width: 100px;
      height: 40px;
      margin-left: 20px;
      border-radius: 5px;
      border: 0;
    }

    #d2 {
      width: 90%;
      margin-left: 5%;
      height: 500px;
      overflow: auto;
      border: 1px solid black;
      background-color: rgba(255, 255, 255, 0.9);
    }

    #tab {
      /*border: 1px solid black;*/
      width: 100%;
      border-collapse: collapse

    }

    #tab thead {
      /*border-left: 1px solid #DFE2EB;*/
      /*border-top: 1px solid #DFE2EB;*/
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      display: table;
      width: 100%;
      table-layout: fixed;
      background-color: rgba(255, 255, 255, 1);
    }

    #tab tbody {
      /*border-left: 1px solid #DFE2EB;*/
      display: table;
      width: 100%;
      table-layout: fixed;
    }

    #tab tr {
      height: 50px;
      border-bottom: 1px solid gray;
      /*border-left: 1px solid gray;*/
      /*border-right: 1px solid gray;*/
    }

    #tab td {

      width: 20%;
      /*border: 1px solid black;*/
      text-align: center;
    }

    #d3 {
      margin-top: 10px;
      width: 90%;
      margin-left: 5%;
      /*border: 1px solid red;*/

      text-align: right;

    }
    #d3 input[type=button]{
      width: 60px;
      height: 30px;
    }
    #d3 input[type=text]{
      width: 100px;
      height: 20px;
      padding-left: 10px;
    }

    #d4 {
      text-align: center;
    }

    #d4 input[type=text] {
      margin-top: 50px;
      width: 60%;
      height: 40px;
      margin-left: 20px;
      padding-left: 20px;
      border-radius: 5px;
    }

    #d4 input[type=button] {
      margin-top: 50px;
      width: 100px;
      height: 40px;
      border-radius: 5px;
      border: 0;
    }
  </style>
  <script>
    $(function () {
      //页面加载后，查询表格数据并渲染
      var page=$("#page").val();
      var pagesize=$("#pagesize").val();
      showlist(page,pagesize);
      //修改
      $("#btn2").click(function () {
        //获取选中元素
        var t = $("#tbody input:radio:checked").val()
        if (t == undefined) {
          alert("请选择要修改的数据");
        } else {
          //展示弹出层
          $("#deviceadd").show();
          //根据id查询数据并渲染
          $.ajax({
            url: "/Navig",
            data: {action:"findByID",id:t},
            type: "post",
            dataType: "json",
            success: function (d) {
              console.log(d);
              if (d.code == 1) {
                $("#id").val(d.data.id);
                $("#id").prop('disabled','disabled')
                $("#name").val(d.data.name);
                $("#pid").val(d.data.pid);
                $("#url").val(d.data.url);
              } else {
                alert(d.msg)
              }
            }
          })
        }
      })
      //添加
      $("#btn3").click(function (){
        //展示弹出层
        $("#deviceadd").show();
        //禁用输入框
        $("#id").prop('disabled','disabled');
      })
      //确定事件
      $("#btn5").click(function (){
        var id=$("#id").val();
        var name=$("#name").val();
        var pid=$("#pid").val();
        var url=$("#url").val();
        if(name==""){
          alert("名称不可为空");
          return;
        }
        if(pid==""){
          alert("上级id不可为空")
          return;
        }
        if(url==""){
          alert("地址不可为空");
          return;
        }
        if(id==""){
          //执行添加
          $.ajax({
            url:"/Navig",
            type:"post",
            data:{action:"add",name:name,pid:pid,url:url},
            dataType:"json",
            success:function (d){
              if(d.code==1){
                alert(d.msg);
                //清空数据
                $("#id").val("");
                $("#name").val("");
                $("#pid").val("");
                $("#url").val("");
                //关闭遮罩层
                $("#deviceadd").hide();

                //刷新表格
                var page=$("#page").val();
                var pagesize=$("#pagesize").val();
                showlist(page,pagesize);
              }else {
                alert(d.msg);
              }
            },
            error:function (){
              alert("添加失败")
            }
          })
        }else {
          //执行修改
          $.ajax({
            url:"/Navig",
            type:"post",
            data:{action:"updateByID",id:id,name:name,pid:pid,url:url},
            dataType:"json",
            success:function (d){
              if(d.code==1){
                alert("修改成功");
                //清空数据
                $("#id").val("");
                $("#name").val("");
                $("#pid").val("");
                $("#url").val("");
                //关闭遮罩层
                $("#deviceadd").hide();
                //刷新表格
                var page=$("#page").val();
                var pagesize=$("#pagesize").val();
                showlist(page,pagesize);
              }else {
                alert(d.msg)
              }
            },
            error:function (){
              alert("修改失败")
            }
          })
        }
      })
      //删除
      $("#btn4").click(function (){
        //获取选中元素
        var t = $("#tbody input:radio:checked").val()
        if(t==undefined){
          alert("请选择要删除的数据");
          return;
        }
        //弹出确认框
        var r = confirm("您确定要删除吗？");
        if (r == true) {
          //执行删除功能
          $.ajax({
            url:"/Navig",
            data:{action:"deleteByID",id:t},
            type:"post",
            dataType:"json",
            success:function (d){
              if(d.code==1){
                alert(d.msg);
                //关闭遮罩层
                $("#deviceadd").hide();
                //刷新表格
                var page=$("#page").val();
                var pagesize=$("#pagesize").val();
                showlist(page,pagesize);
              }else {
                alert("删除失败")
              }
            },
            error:function (){
              alert("删除失败")
            }
          })
        }
      })
      //取消
      $("#btn6").click(function (){
        //清空数据
        $("#id").val("");
        $("#name").val("");
        $("#pid").val("");
        $("#url").val("");
        //关闭遮罩层
        $("#deviceadd").hide();
      })


      //首页
      $("#btn10").click(function (){
        var page=1;
        var pagesize=$("#pagesize").val();

        showlist(page,pagesize);
      })
      //上一页
      $("#btn11").click(function (){
        var page=$("#page").val();
        if(page=="1"){
          page=$("#sizeauto").val();
        }else {
          page=parseInt(page)-1;
        }
        var pagesize=$("#pagesize").val();

        showlist(page,pagesize);
      })
      //下一页
      $("#btn12").click(function (){
        var page=$("#page").val();
        if(page==$("#sizeauto").val()){
          page=1;
        }else {
          page=parseInt(page)+1;
        }
        var pagesize=$("#pagesize").val();

        showlist(page,pagesize);
      })
      //尾页
      $("#btn13").click(function (){
        var page=$("#sizeauto").val();
        var pagesize=$("#pagesize").val();

        showlist(page,pagesize);
      })
      //当前页失去焦点
      $("#page").focusout (function (){
        var page=$("#page").val();
        var pagesize=$("#pagesize").val();

        showlist(page,pagesize);
      })
      // //页面数失去焦点
      $("#pagesize").focusout (function (){
        var page=1;
        var pagesize=$("#pagesize").val();

        showlist(page,pagesize);
      })
      //查询
      $("#btn1").click(function (){
        var page=1;
        var pagesize=$("#pagesize").val();

        showlist(page,pagesize);
      })

    })
    //加载页面数据
    function showlist(page,pagesize){
      var name=$("#n").val();
      $.ajax({
        url: "/Navig",
        data: {action:"findAllByPage",name:name,page:page,pagesize:pagesize},
        type: "post",
        dataType: "json",
        success: function (d) {
          if (d.code == 1) {
            console.log(d);
            //清空表格原有数据
            $("#tbody").html("");
            //赋值
            $("#page").val(d.data.curPage);
            $("#pagesize").val(d.data.pageSize);
            $("#sizeauto").val(d.data.totalPage);
            //渲染表格数据
            for (var i = 0; i < d.data.data.length; i++) {
              console.log(d.data[i]);
              $("#tbody").append("<tr>" +
                      "<td><input type='radio' name='1' value='" + d.data.data[i].id + "'></td>" +
                      "<td>" + d.data.data[i].id + "</td>" +
                      "<td>" + d.data.data[i].name + "</td>" +
                      "<td>" + d.data.data[i].pid + "</td>" +
                      "<td>" + d.data.data[i].url + "</td>" +
                      "</tr>")
            }
          }
        }
      })
    }
  </script>

</head>
<body>

<div id="d1">
  <input type="text" id="n">
  <input type="button" value="查询" id="btn1">
  <input type="button" value="修改" id="btn2">
  <input type="button" value="删除" id="btn4">
  <input type="button" value="添加" id="btn3">
</div>
<div id="d2">
  <table id="tab" style="">
    <thead>
    <tr>
      <th>单选</th>
      <th>编号</th>
      <th>名称</th>
      <th>上级id</th>
      <th>地址</th>
    </tr>
    </thead>
    <tbody id="tbody">
    </tbody>
  </table>
</div>
<div id="d3">
  <input type="button" value="首页" id="btn10">
  <input type="button" value="上一页"id="btn11">
  <input type="button" value="下一页" id="btn12">
  <input type="button" value="尾页" id="btn13">
  <span>当前页：</span>
  <input type="text" value="1" id="page">
  <span>每页显示条数:</span>
  <input type="text" value="10" id="pagesize">
  <span>总页数：</span>
  <input type="text" id="sizeauto" disabled >
</div>
<!--修改时，弹出层 ，弹出遮罩层，和内容-->
<div id="deviceadd"
     style=" display: none;width: 100%;height: 100vh;position: fixed;top: 0vh;left: 0vh;background: rgba(48,48,48,0.7);">
  <div id="d4"
       style="width:500px;height:600px; display: block; position: absolute;  background-color: rgba(255,255,255,1);left: 70vh;top: 10vh">
    <span>编&emsp;&emsp;号:</span><input type="text" id="id" placeholder="请输入编号" disabled><br>
    <span>名&emsp;&emsp;称:</span><input type="text" id="name" placeholder="请输入名称"><br>
    <span>上级编号:</span><input type="text" id="pid" placeholder="请输入上级编号"><br>
    <span>地&emsp;&emsp;址:</span><input type="text" id="url" placeholder="请输入地址"><br>
    <input type="button" value="确定" id="btn5" style="margin-right: 30px">
    <input type="button" value="取消" id="btn6">
  </div>
</div>

</body>
</html>